<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    body {
        background: #ddd;
    }

    #canvas {
        margin-left: 500px;
        position: absolute;
        transform: translate(-50%, -50%);
        animation: testAnimate 3s linear infinite;
    }

    @keyframes testAnimate {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        let ctx = document
            .getElementById("canvas")
            .getContext("2d");
       
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 250, 200, Math.PI / 2, Math.PI * 1.5, false);
        ctx.closePath();
        ctx.fill();
       
        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.arc(250, 250, 200, Math.PI / 2, Math.PI * 1.5, true);
        ctx.closePath();
        ctx.fill();
       
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 150, 100, Math.PI / 2, Math.PI * 1.5, true);
        ctx.closePath();
        ctx.fill();
       
        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.arc(250, 350, 100, Math.PI / 2, Math.PI * 1.5, false);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.arc(250, 150, 25, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 350, 25, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

    </script>
</body>

</html>